<script setup lang="ts">
import { useHome } from "./utils/hook";
import ShopCar from "@iconify-icons/ep/shopping-cart";
import { ImageViewer } from "@/components/common/ImageViewer";
import { Search } from "@element-plus/icons-vue";
import { dealDataExcept } from "@/utils/common";
import {
  getPrice,
  getBrandPrice,
  getStock,
  getSupplierStock
} from "./utils/common";

defineOptions({
  name: "Goods"
});

const {
  goodsType,
  typeList,
  form,
  loading,
  dataList,
  pagination,
  onSearch,
  showGoodsDetail,
  handleSizeChange,
  handleCurrentChange
} = useHome();
</script>

<template>
  <div class="home">
    <!-- 头部搜索 -->
    <div class="header">
      <el-tabs v-model="goodsType" class="menu-tabs">
        <el-tab-pane
          v-for="(item, index) in typeList"
          :key="index"
          :label="item.itemName"
          :name="Number(item.itemValue)"
        />
      </el-tabs>
      <div class="search">
        <el-input
          v-model="form.searchContent"
          class="!w-[280px]"
          :prefix-icon="Search"
          placeholder="编码、条码、辅助条码、名称搜索"
          clearable
          @keyup.enter="onSearch"
          @change="onSearch"
        />
      </div>
    </div>

    <!-- 商品展示 -->
    <div v-loading="loading" class="goods">
      <!-- 商品列表 -->
      <div v-for="item in dataList" :key="item.id" class="good">
        <ImageViewer
          width="100%"
          height="160px"
          radius="10px"
          class="mb-[10px]"
          :src="item.imageJson"
        />
        <div class="flex items-center justify-between">
          <el-tooltip
            effect="dark"
            :content="item.goodsName"
            placement="top-start"
          >
            <h4 class="text-cut cursor-pointer">
              {{ item.goodsName || "--" }}
            </h4>
          </el-tooltip>
          <el-tag v-if="item.hasBuy" class="ml-1" type="success" size="small">
            已购
          </el-tag>
        </div>

        <div class="cell">
          <div class="c-title">编码</div>
          <div class="c-content">
            <el-tooltip
              effect="dark"
              :content="item.goodsCode"
              placement="top-start"
            >
              <div class="text-cut cursor-pointer">
                {{ item.goodsCode || "--" }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <div class="cell">
          <div class="c-title">条码</div>
          <div class="c-content">
            {{
              item.goodsSpecList && item.goodsSpecList.length > 0
                ? item.goodsSpecList[0].barCode || "--"
                : "--"
            }}
          </div>
        </div>
        <!-- <div v-if="item.goodsSpecList.length > 1" class="spec">
          <el-tag
            v-for="(spec, speci) in item.goodsSpecList"
            :key="speci"
            effect="plain"
            type="primary"
            size="small"
            >{{ spec.specName }}</el-tag
          >
        </div> -->
        <div class="cell">
          <div class="c-title">仓库库存</div>
          <div
            v-if="item.goodsSpecList && item.goodsSpecList.length > 0"
            class="c-content"
          >
            {{ getStock(item.goodsSpecList[0].stockItemList) }}
          </div>
        </div>
        <div v-if="item.goodsType == 1" class="cell">
          <div class="c-title">供应商库存</div>
          <div class="c-content">
            <template
              v-if="item.goodsSpecList && item.goodsSpecList.length > 0"
              >{{
                getSupplierStock(item.goodsSpecList[0].stockSupplierList)
              }}</template
            >
          </div>
        </div>
        <div class="cell">
          <div class="c-title">销量</div>
          <div class="c-content">{{ item.salesVolume || 0 }}</div>
        </div>
        <div v-if="item.goodsType == 2" class="cell">
          <div class="c-title">起订量</div>
          <div class="c-content">{{ item.orderMin || 0 }}</div>
        </div>
        <div class="cell">
          <div class="c-title">推荐指数</div>
          <div class="c-content">
            <el-rate
              :model-value="item.recommendIndex / 10"
              size="small"
              disabled
            />
          </div>
        </div>
        <div class="cell">
          <div class="c-title">进价</div>
          <div class="c-content price-box">
            ¥<span
              v-if="item.goodsSpecList && item.goodsSpecList.length > 0"
              class="price"
              >{{ getPrice(item.goodsSpecList[0]) }}</span
            >
          </div>
        </div>
        <!-- 兑换礼品类型 -->
        <template v-if="item.goodsType == 2">
          <div class="cell">
            <div class="c-title">售价</div>
            <div
              v-if="getBrandPrice(item.goodsSpecList[0]).discountSalePrice"
              class="c-content price-box"
            >
              <span
                >¥<span class="price">{{
                  dealDataExcept(
                    getBrandPrice(item.goodsSpecList[0]).discountSalePrice
                  )
                }}</span></span
              >
              <span class="zk-price"
                >¥
                {{
                  dealDataExcept(
                    getBrandPrice(item.goodsSpecList[0]).storeSalePrice
                  )
                }}</span
              >
            </div>
            <div v-else>--</div>
          </div>
          <div class="cell">
            <div class="c-title">积分</div>
            <div
              v-if="getBrandPrice(item.goodsSpecList[0]).discountScore"
              class="c-content price-box"
            >
              <span class="price">{{
                dealDataExcept(
                  getBrandPrice(item.goodsSpecList[0]).discountScore
                )
              }}</span>
              <span class="zk-price">{{
                dealDataExcept(getBrandPrice(item.goodsSpecList[0]).score)
              }}</span>
            </div>
            <div v-else>--</div>
          </div>
        </template>

        <div class="opt">
          <div class="btn" @click="showGoodsDetail({ id: item.id })">
            <div class="shop-car">
              <IconifyIconOffline class="text-white" :icon="ShopCar" />
            </div>
            <div class="do-order">直接下单</div>
          </div>
        </div>
      </div>

      <el-empty
        v-if="dataList.length == 0"
        class="m-auto"
        description="暂无商品~"
      />
    </div>
    <!-- 分页 -->
    <div v-if="dataList.length > 0" class="pagination">
      <el-pagination
        background
        :default-page-size="20"
        :page-sizes="[20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  border-radius: 5px;
  box-shadow: none !important;
  .header {
    padding: 2px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
  }
}
.goods {
  min-height: 450px;
  padding: 15px 0;
  display: flex;
  flex-wrap: wrap;
  .good {
    width: 200px;
    padding: 10px 10px 12px;
    margin: 0 15px 15px 0;
    border-radius: 5px;
    background-color: #fff;
    .cell {
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      .c-title {
        color: #999;
        min-width: 40px;
      }
      .c-content {
        flex: 1;
        overflow: hidden;
        word-wrap: break-word;
        text-align: right;
        line-height: 20px;
      }
    }
    .spec {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .price-box {
      color: red;
      font-size: 14px;
      .price {
        font-size: 20px;
        margin-left: 2px;
      }
      .zk-price {
        color: #999;
        margin-left: 10px;
        text-decoration: line-through;
      }
    }
    .opt {
      margin-top: 8px;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      cursor: pointer;
      .btn {
        font-size: 14px;
        color: #fff;
        width: 100px;
        height: 28px;
        line-height: 28px;
        display: flex;
        border-radius: 12px;
        overflow: hidden;

        .shop-car {
          width: 30px;
          height: 100%;
          background-color: orange;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .do-order {
          flex: 1;
          text-align: center;
          background-color: red;
        }
      }
    }
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  margin-top: 15px;
}
:deep(.pagination .el-select__wrapper),
:deep(.pagination .el-input__wrapper) {
  background: none;
}
</style>
